<template>
  <div class="studentFollowDetails">
    <el-form ref="form" :model="formData" label-width="150px">
      <div class="form_wrap">
          <p class="basic_title">基本信息</p>
          <div class="basic_content" v-if="formData">
              <el-form-item label="潜客编号：">
                  <el-input v-model="formData.sno" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <!-- <el-form-item label="修改参数：">
                  <el-select :disabled="true" v-model="formData.varname">
                      <el-option
                          v-for="item in contractChangeStatusList"
                          :key="item.id"
                          :label="`${item.sno}: ${item.name}`"
                          :value="parseInt(item.id)">
                      </el-option>
                  </el-select>
              </el-form-item> -->
              <el-form-item label="潜客姓名：">
                  <el-input v-model="formData.name" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="邮箱：">
                  <el-input v-model="formData.email" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="手机号码：">
                  <el-input v-model="formData.mobile" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="跟进主题：">
                  <el-input v-model="formData.title" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="跟进方式：">
                  <el-input v-model="formData.way" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="跟进结果：">
                  <el-input v-model="formData.result" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="创建时间：">
                <el-input v-model="formData.create_time" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="下次跟进时间：">
                <el-input v-model="formData.next_time" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="操作人：">
                  <el-input v-model="formData.username" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="操作人：">
                  <el-input type="textarea" v-model="formData.content" style="width: 218px;" disabled></el-input>
              </el-form-item>
              <el-form-item v-for="(item, index) in formData.picarr" :key="index" :label="`跟进图片${index + 1}：`">
                  <img :src="item.url" style="height: 100px;">
              </el-form-item>
          </div>
      </div>
      <!-- <link-details :moduleData="moduleData" :formData="formData" @changeFormData="changeFormData"></link-details> -->
    </el-form>
  </div>
</template>

<script>
import http from '@/api/student_follow'
export default {
  name: 'studentFollowDetails',
  data () {
    return {
      varnameList: [],
      formData: null,
      contractChangeStatusList: [],
      auditStatusList: null
    }
  },
  methods: {
    init () {
      let basicConfig = JSON.parse(sessionStorage.getItem('basicConfig'));
      let contractChangeStatusList = [];
      let keysData = Object.keys(basicConfig.audit_varname);
      if(keysData.length){
        keysData.map(item => {
            contractChangeStatusList.push({value: item,label: basicConfig.audit_varname[item]})
        })
        this.contractChangeStatusList = contractChangeStatusList;
      }
      this.auditStatusList = basicConfig.audit_status
    }
  },
  created () {
    this.init()
    let id = this.$route.query.id
    http.getContentDetail({id}).then(res => {
      this.formData = res.data
      //   for (let item of this.contractChangeStatusList) {
      //     if (item.value === this.formData.varname) {
      //       this.formData.varname = item.label
      //     }
      //   }
      //   for (let status of this.auditStatusList) {
      //     if (this.formData.status - status.status === 0) {
      //       this.formData.status = status.label
      //     }
      //   }
      //   let infoContent = JSON.parse(this.formData.varinfo)
      //   let infoContents = Object.keys(infoContent)
      //   let allInfo = []
      //   if (infoContents.length) {
      //     for (let info of infoContents) {
      //       allInfo.push({value: infoContent[info], label: info})
      //     }
      //   }
      // this.formData.editInfo = allInfo
    })
  }
}
</script>

<style lang="scss" scoped>
  .studentFollowDetails {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }

    .form_wrap{
        margin-bottom: 10px;
        h4{
            margin: 10px 0px;
        }
        hr{
            margin-bottom: 10px;
        }
        .form_content{
            display: flex;
            flex-wrap: wrap;
        }
    }
    // /deep/ .el-dropdown-menu {
    //     width: 100px;
    //     text-align: center;
    // }
    .btn {
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: center;
      /deep/ .el-button {
        width: 214px;
      }
    }
    .changeContent {
        div {
            p {
                width: 90px;
            }
            /deep/ .el-input {
                width: 330px;
            }
            /deep/ .el-textarea {
                width: 330px;
            }
        }
    }
    .basic_title {
        width: 100%;
        line-height: 41px;
        background: #F5F5F5;
        padding-left: 24px;
        color: #333;
        font-size: 20px;
        font-weight: 600;
    }
    .basic_content {
        padding: 40px 0 44px 24px;
        padding-top: 40px;
        display: flex;
        flex-wrap: wrap;
        /deep/ .el-form-item {
            // width: 25%;
            font-weight: 600;
        }
        li {
            width: 25%;
            list-style: none;
            line-height: 45px;
            font-weight: 600;
            span {
                font-weight: 400;
            }
        }
    }
  }
</style>